<template>
  <div class="main user_main">
    <header class="header">
      <p class="card">
        <span class="card_bg"></span> {{currentInfo.cardnum}}</p>
      <p class="header_name">{{userInfo.nickname}}</p>
      <div class="header_info">
        <div>
          <p>&emsp;代理ID：{{userInfo.user_id}}</p>
          <p>&emsp;游戏ID：{{currentInfo.play_id || '请绑定ID'}}</p>
        </div>
        <div class="line"></div>
        <div>
          <p>代理账号:{{userInfo.mobile}}</p>
          <p>邀&ensp;请&ensp;码：{{userInfo.invitationcode}}</p>
        </div>
      </div>
    </header>
    <group class="list">
      <cell v-if="bindGameID" title="绑定游戏账号" is-link link="bindGameID">
        <img slot="icon" src="../../images/icon_S_01.png" alt="绑定游戏账号">
      </cell>
      <cell title="余额" link="banlance">
        <img slot="icon" src="../../images/icon_S_02.png" alt="余额">
      </cell>
      <cell title="兑换门票" link="ExchangeTicket">
        <img slot="icon" src="../../images/icon_S_03.png" alt="兑换门票">
      </cell>
      <cell title="任务" is-link link="/home/task">
        <img slot="icon" src="../../images/icon_S_04.png" alt="任务">
      </cell>
      <cell title="我邀请的玩家" is-link link="visitedPlayer">
        <img slot="icon" src="../../images/icon_S_05.png" alt="我邀请的玩家">
      </cell>
      <cell title="游戏白名单" is-link link="gameWhiteList">
        <img slot="icon" src="../../images/icon_S_06.png" alt="游戏白名单">
      </cell>
      <cell title="投诉建议" link="advise">
        <img slot="icon" src="../../images/icon_S_07.png" alt="投诉建议">
      </cell>
    </group>
    <group class="list">
      <cell title="注销登录" is-link @click.native="loginOutClick">
        <img slot="icon" src="../../images/icon_S_08.png" alt="注销登录">
      </cell>
    </group>
    <foot-guide :select="3"></foot-guide>
  </div>
</template>
<script>
import { Cell, Group } from "vux";
import footGuide from "../../components/footer/footGuide";

export default {
  data() {
    return {
      userInfo: {},
      currentInfo: {}
    };
  },
  components: {
    Cell,
    Group,
    footGuide
  },
  created() {
    this.userInfo = this.apiService.getLocalData("userInfo");
    this.apiService.user.userinfo().then(res => {
      this.currentInfo = res.data;
    });
  },
  computed: {
    bindGameID() {
      return !this.currentInfo["play_id"];
    }
  },
  methods: {
    loginOutClick() {
      let _this = this;
      this.$vux.confirm.show({
        title: "温馨提示",
        content: `确定要注销么？`,
        onConfirm() {
          _this.apiService.user.logout().then(res => {
            location.reload();
          });
        }
      });
    }
  }
};
</script>
<style>
.user_main .weui-cell {
  padding-left: 0;
}
.user_main .weui-cell__hd {
  width: 0.8rem;
  text-align: center;
}
</style>

<style scoped>
.main {
  padding-bottom: 71px;
}
/* 头部 */
.header {
  background-color: #1b82d2;
  color: #dcdcde;
  height: 2.15rem;
  padding: 0 0 0.3rem;
  text-align: center;
  position: relative;
}
.card {
  background-color: #146cb1;
  margin: 0.1rem;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.04rem 0.2rem;
  padding-left: 0.32rem;
  border-radius: 0.25rem;
  font-size: 0.22rem;
}
.card_bg {
  background: url("../../images/fangka_icon.png") no-repeat;
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
  background-size: 100% 100%;
  width: 0.35rem;
  height: 0.41rem;
}
.header_name {
  font-size: 0.36rem;
  padding: 0.5rem 0;
}
.header_info {
  display: flex;
  justify-content: space-around;
}
.header_info div {
  font-size: 0.24rem;
  width: 40%;
}
.header_info div p {
  text-align: left;
}
.header_info .line {
  background-color: #dcdcde;
  height: 0.7rem;
  width: 0.02rem;
}
/* 列表 */
.list img {
  margin-top: 0.1rem;
  max-width: 0.45rem;
  max-height: 0.45rem;
}
</style>


